<!--
动画的属性
    @keyframes  定义动画
    
    animation
        - 简写（复合写法），除了【animation-play-state】属性以外
        - 动画名称、持续时间必须写
        - animation: 动画名称 持续时间 运动曲线 重复次数 是否反向 终态或始态;
        - animation: name duration timing-function delay iteration-count direction fill-mode;
    
    补充：一个元素可以添加多个动画，逗号分隔
        animation: move 2s linear, change 3s 1s infinite;

    animation-name（必须）       动画名
    animation-duration（必须）   耗时，完成一个动画周期所需要的时间，默认0s
    animation-delay             延时触发时间，默认0s，即立刻触发
    animation-iteration-count   播放次数（周期数），默认1次，无限次infinite
    animation-fill-mode         结束时：保持最后状态forwards，回到起始状态backwards（周期数必须是有限的，否则无意义）
    animation-play-state        正在运行running，暂停pause（通常搭配:hover）

    animation-timing-function
        - 速度曲线（针对一个关键字周期，不是整个动画周期），自己看控制台的图示
        - ease          低速开始，然后加快，最后变慢（默认）
        - ease-in       以低速开始
        - ease-out      以低速结束
        - ease-in-out   以低速开始和结束
        - linear        匀速
        - steps()       步长（间隔数量）

    animation-direction
        - 下一周期是否逆向（搭配周期数一起）
        - normal             始->终...正向单向（默认）
        - reverse            终->始...反向单向
        - alternate          始->终->始...正向来回跑
        - alternate-reverse  终->始->终...反向来回跑
-->
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  @keyframes move {
    from {
      transform: translate(0, 0);
    }
    to {
      transform: translate(1000px, 0);
    }
  }
  .box {
    width: 260px;
    height: 100px;
    background-color: cyan;
    /* 动画属性 */
    /* animation-name: move; */
    /* animation-duration: 5s; */
    /* animation-delay: 2s; */
    /* animation-fill-mode: forwards; */
    /* animation-timing-function: ease; */
    /* animation-iteration-count: infinite; */
    /* animation-direction: reverse; */
    /* 简写 */
    animation: move 3s 5 alternate;
  }
  .two {
    animation-timing-function: ease-in;
  }
  .three {
    animation-timing-function: ease-out;
  }
  .four {
    animation-timing-function: ease-in-out;
  }
  .five {
    animation-timing-function: linear;
  }
  .box:hover {
    animation-play-state: paused;
  }
</style>

<div class="box">ease</div>
<div class="box two">ease-in</div>
<div class="box three">ease-out</div>
<div class="box four">ease-in-out</div>
<div class="box five">linear</div>
